<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
</head>
<style>
    .circle {
        width: 300px;
        height: 300px;
        /*8.3 16.7 25 33.3 41.7 50 58.3 66.7 75 83.3 91.7 100 颜色对应百分比*/
        background: conic-gradient(#ff0000,#ff3300,#f64302,#FF5900, #ff6027,#ff7327,#fcc202,#ffc403,#d7f10f,#62e317,#178067, #179087);
        border-radius: 50%;
        position: relative;
    }

    #progress-circle circle {
        stroke-dasharray: 880;
        stroke: #f2f2f2;
    }

    #progress-circle {
        transform: rotate(-90deg);
    }

    .circle-mask {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 260px;
        height: 260px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inner_number{
        font-size: 48px;
        font-weight: 700;
    }
</style>

<body>
    <div class="circle">
        <svg id="progress-circle" width="300" height="300">
            <circle r="140" cx="150" cy="150" stroke-width="21" fill="transparent" />
        </svg>
        <div class="circle-mask">
            <div class="inner_number"></div>
        </div>
    </div>
</body>
<script>
    const circle = document.querySelector('#progress-circle circle');
    const inner = document.querySelector('.inner_number');
    const radius = circle.r.baseVal.value;
    const circumference = radius * 2 * Math.PI;
    let prog = 0
    let timer = null
    function setProgress(percent) {
        const progress = (percent / 100) * circumference;
        circle.style.strokeDashoffset = -progress;
        const colorMap = new Map([
            [0,'#ff0000'],
            [1,'#ff3300'],
            [2,'#f64302'],
            [3,'#FF5900'],
            [4,'#ff6027'], 
            [5,'#ff7327'],
            [6,'#fcc202'],
            [7,'#ffc403'],
            [8,'#d7f10f'],
            [9,'#62e317'],
            [10,'#178067'],
            [11,'#179087']
        ])
        inner.innerHTML = percent + '%'

        if (percent <= 8.3) return inner.style.color = colorMap.get(0)
        if (percent > 8.3 && percent <= 16.7) return inner.style.color = colorMap.get(1)
        if (percent > 16.7 && percent <= 25) return inner.style.color = colorMap.get(2)
        if (percent > 25 && percent <= 33.3) return inner.style.color = colorMap.get(3)
        if (percent > 33.3 && percent <= 41.7) return inner.style.color = colorMap.get(4)
        if (percent > 41.7 && percent <= 50) return inner.style.color = colorMap.get(5)
        if (percent > 50 && percent <= 58.3) return inner.style.color = colorMap.get(6)
        if (percent > 58.3 && percent <= 66.7) return inner.style.color = colorMap.get(7)
        if (percent > 66.7 && percent <= 75) return inner.style.color = colorMap.get(8)
        if (percent > 75 && percent <= 83.3) return inner.style.color = colorMap.get(9)
        if (percent > 83.3 && percent <= 91.7) return inner.style.color = colorMap.get(10)
        if (percent > 91.7 && percent <= 100) return inner.style.color = colorMap.get(11)
        else return inner.style.color = '#000'

    }
    function setTimer() {
        if (!timer) {
            timer = setInterval(() => {
                prog++
                setProgress(prog)
                if (prog >= 100) {
                    prog = 0
                }
            },100)
        }
    }
    setTimer()
</script>

</html>
